<template>
  <section class="f-goods-detail">
    <div class="w-card my-content-box">
      <div class="title-box">
        <div class="g-flex-ct">
          <span class="title-text">月结任务</span>
        </div>
      </div>

      <div class="f-card">
        <el-button type="warning" plain @click="confirmPass('上月激活设备统计开始计算',4)">上月激活设备统计开始计算</el-button>
        <p class="f-tips">提示：计算出上一个月，各个代理商自激活与团队激活的数据并入库，重复操作后会覆盖之前的数据。</p>
      </div>

      <div class="f-card">
        <el-button type="warning" plain @click="confirmPass('店铺等级重算',1)">店铺等级重算</el-button>
        <p class="f-tips">提示：操作后会计算出上一个月所有代理商的等级，如果已计算过，本次操作会覆盖之前计算的结果。</p>
      </div>

      <div class="f-card">
        <el-button type="warning" plain @click="confirmPass('同级推荐佣金开始计算',3)">同级推荐佣金开始计算</el-button>
        <p class="f-tips">提示：计算并发放上一个月代理商应该获得的同级推荐佣金，重复操作无效。</p>
      </div>

      <div class="f-card">
        <el-button type="warning" plain @click="confirmPass('级差佣金开始计算',5)">级差佣金开始计算</el-button>
        <p class="f-tips">提示：计算并发放上一个月代理商应获得的级差佣金，重复操作无效。</p>
      </div>

      <div class="f-card">
        <el-button type="warning" plain @click="confirmPass('分红开始计算',2)">分红开始计算</el-button>
        <p class="f-tips">提示：计算出上一个月代理商能获得的分佣佣金，并发放给代理商，重复操作无效。</p>
      </div>
    </div>

    <!-- 确认密码 -->
    <ConfirmPass ref="confirmPasswordRef" @verification="confirmSuccess" />
  </section>
</template>
    
    <script>
import { onMounted, reactive, ref, toRefs, watch, nextTick } from 'vue'
import { getWindowWidthAndHeight, warningDeal, getDateTime, successDeal, BlobDownLoad } from '@/utils/utils'
import { useRoute, useRouter } from 'vue-router'
import ConfirmPass from '@/components/confirmPass.vue'
import api from './api'

export default {
  components: { ConfirmPass },

  setup() {
    const route = useRoute()
    const router = useRouter()

    const confirmPasswordRef = ref(null)

    const state = reactive({
      type: 1,
    })

    function confirmPass(e, type) {
      const title = "提示"
      const msg = `您确定要${e}吗？`
      state.type = type
      confirmPasswordRef.value.dialogShow(title, msg)
    }

    const confirmSuccess = () => {
      switch (state.type) {
        case 1:
          api.shoplevelReset().then(res => {
            successDeal('操作成功！')
          })
          break;
        case 2:
          api.taskFenhongStatics().then(res => {
            successDeal('操作成功！')
          })
          break;
        case 3:
          api.taskIncomeTuijianStatics().then(res => {
            successDeal('操作成功！')
          })
          break;
        case 4:
          api.taskLastMonthStatics().then(res => {
            successDeal('操作成功！')
          })
          break;
        case 5:
          api.taskLevelBuchongIncome().then(res => {
            successDeal('操作成功！')
          })
          break;
      }
    }

    onMounted(() => {
      let winHeight = getWindowWidthAndHeight()
    })

    return {
      ...toRefs(state),
      confirmPasswordRef,
      confirmPass,
      getDateTime,
      confirmSuccess,
    }
  }
}
</script>
    
<style lang="scss" scoped>
.f-goods-detail {
  .my-content-box {
    box-sizing: border-box;
    padding: 20px;

    .title-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title-text {
        font-size: 16px;
        font-weight: bold;
      }
    }

    .f-card {
      background: #f1f4f6;
      border-radius: 6px;
      padding: 20px;
      margin-top: 18px;
      display: flex;
      align-items: center;
      gap: 0 20px;
      .f-tips {
        color: red;
        font-size: 12px;
      }
    }
  }
}
</style>